<template>
  <div style="margin-bottom: 100px">
    <h1 style="text-align: center;color: orangered">销量冠军:{{this.food.name}}</h1>
    <div style="margin: 10px 0;border-radius: 10px;overflow: hidden">
      <img :src="this.food.img" style="width: 100%;cursor: pointer;height: 450px" @click="$router.push('/front/detail?id='+this.food.id)">
    </div>

    <div style="margin: 10px 0">
      <h2 style="color: orangered">热销商品</h2>
      <el-row :gutter="5">
        <el-col :span="6" v-for="item in tableData" :key="item.id">
          <div style="position: relative;border: 1px solid #ccc;padding-bottom: 10px;border-radius: 10px;overflow: hidden;height: 100%">
            <img :src="item.img" style="width: 100%;cursor: pointer;height: 130px" @click="$router.push('/front/detail?id='+item.id)">
            <div style="color: #666;padding: 5px;font-size: 18px;height: 35px; cursor: pointer" @click="$router.push('/front/detail?id='+item.id)"><b>{{item.name}}</b></div>
            <div style="color: #666;padding: 5px;font-size: 14px;height: 45px;overflow: hidden">{{item.description}}</div>
            <div style="color: orangered;padding: 5px 5px 5px 50px;font-size: 14px;height: 25px"><span style="right:10px;bottom:10px;"><b>月销:{{item.sale}} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;价格:¥ {{item.price}}</b></span></div>
            <div class="item1" style="margin-top: 10px;padding-left: 120px">
              <el-button style="background-color: red;color: white" @click="addCard(item.id)"><el-icon><shopping-cart /></el-icon>加入购物车</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    分页插件-->
<!--    <div style="margin: 10px">-->
<!--      <el-pagination-->
<!--          :currentPage="currentPage"-->
<!--          :page-size="pageSize"-->
<!--          :page-sizes="[5, 9]"-->
<!--          layout="total, sizes, prev, pager, next, jumper"-->
<!--          :total="total"-->
<!--          @size-change="handleSizeChange"-->
<!--          @current-change="handleCurrentChange"-->
<!--      />-->
<!--    </div>-->
  </div>
</template>

<script>
import request from "@/utils/request";
import {ShoppingCart} from "@element-plus/icons";

export default {
  name: "Home",
  components: {
    ShoppingCart
  },
  created() {
    this.mustPoint()
    this.champion()
  },
  data() {
    return {
      imgs:[
        'http://localhost:9001/order/files/529808bacbae4ab8a12d1a5d0415b95f',
      ],
      search:'',
      total:0,
      currentPage:1,
      pageSize:4,
      tableData:[],
      food:{},
      user: sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {},
      form: {num: 1},
    }
  },
  methods:{
    //添加购物车
    addCard(id) {
      if(!this.user.name){
        this.$message.warning("请登录后进行操作!")
        return
      }else{
        this.form.foodId=id
        this.form.userId=this.user.id
        request.post("/order/cart/save",this.form).then(res => {
          if(res.code == 200){
            this.$message.success("添加成功");
          }else{
            this.$message.error("添加失败!");
          }
        })
      }
    },
    mustPoint(){
      request.get("order/food/mustPoint").then(res =>{
        this.tableData = res.data
      })
    },
    champion(){
      request.get("order/food/champion").then(res =>{
        this.food = res.data
      })
    },
    // pageList(){
    //   request.get("order/food/pageList", {
    //     params: {
    //       currentPage: this.currentPage,
    //       pageSize: this.pageSize,
    //       name: this.search
    //     }
    //   }).then(res =>{
    //     this.tableData = res.data.list
    //     this.total = res.data.total
    //   })
    // },
    handleSizeChange(pageSize){
      this.pageSize=pageSize;
      this.pageList()
    },
    handleCurrentChange(currentPage){
      this.currentPage=currentPage;
      this.pageList()
    },
  }
}
</script>

<style scoped>

</style>